<template>
  <el-dialog
    class="user-dialog-class"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :title="tips"
    width="30%"
  >
    <el-form
      ref="formRef"
      label-width="150px"
      label-position="top"
      class="demo-dynamic"
      :rules="rules"
      :model="formData"
    >
      <el-form-item prop="username" label="用户名">
        <el-input v-model="formData.username" auto-complete="off" />
      </el-form-item>

      <el-form-item prop="password" label="密码">
        <el-input
          v-model="formData.password"
          type="password"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item prop="commodity" label="新增商品权限">
        <el-switch v-model="formData.commodity" />
      </el-form-item>
      <el-form-item prop="putpush" label="上下架">
        <el-switch v-model="formData.putpush" />
      </el-form-item>
      <el-form-item prop="stock" label="修改库存">
        <el-switch v-model="formData.stock" />
      </el-form-item>
      <el-form-item prop="price" label="修改价格">
        <el-switch v-model="formData.price" />
      </el-form-item>
      <el-form-item prop="account" label="账号权限">
        <el-switch v-model="formData.account" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="handleLogin"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  reactive,
  defineExpose,
  defineEmits,
} from "vue";
import { addJurisdictionPage, changeJurisdictionPage } from "@/api/services";

const emit = defineEmits(["refresh"]);
const { proxy } = getCurrentInstance();
const formRef = ref();
let formData = reactive({
  username: "",
  password: "",
  commodity: false,
  putpush: false,
  stock: false,
  price: false,
  account: false,
});
const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  commodity: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
  putpush: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
  stock: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
  price: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
  account: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
});
const open = (title, user = {}) => {
  // console.log("user: ", user.account);
  dialogVisible.value = true;
  tips.value = title;
  if (user.username) {
    let data = {
      ...user,
      account: user.account == 1 ? true : false,
      commodity: user.commodity == 1 ? true : false,
      price: user.price == 1 ? true : false,
      putpush: user.putpush == 1 ? true : false,
      stock: user.stock == 1 ? true : false,
    };
    formData = Object.assign(formData, data);
  } else {
    formData = Object.assign(formData, {
      username: "",
      password: "",
      commodity: false,
      putpush: false,
      stock: false,
      price: false,
      account: false,
    });
  }
};
const handleLogin = () => {
  if (!formRef) return;
  //   console.log('formRef: ', formRef);
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      // console.log("submit!", formData);
      let res;
      let params = {
        ...formData,
        account: formData.account ? 1 : 0,
        commodity: formData.commodity ? 1 : 0,
        price: formData.price ? 1 : 0,
        putpush: formData.putpush ? 1 : 0,
        stock: formData.stock ? 1 : 0,
      };
      if (tips.value == "新增用户") {
        res = await addJurisdictionPage(params);
      } else {
        res = await changeJurisdictionPage(params);
      }
      // console.log("res: ", res);
      proxy.$message.success(res.msg);
      emit("refresh");
      cancelDialog();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const dialogVisible = ref(false);
const tips = ref("新增用户");

const cancelDialog = () => {
  formRef.value.resetFields();
  dialogVisible.value = false;
};
const handleClose = done => {
  formRef.value.resetFields();
  done();
};

//关键点 把 方法暴露给父组件
defineExpose({ open });
</script>

<style>
.user-dialog-class .el-dialog__body {
  padding-left: 40px;
}
</style>
